import { Select, Button, Table, Modal, message } from 'antd';
import { connect } from 'react-redux'
import { LoadOrderActionAsync } from '../../../redux/action/orderAction';
import UpdateOrder from './UpdateOrder.js'
import http from '../../../service/http';
import React from 'react';
const { Option } = Select;
let audio
let timer = null
function Order(props) {
  const [status, setStatus] = React.useState([])
  const [index, setIndex] = React.useState(-1)
  const [showEditOrderDialog, setShowEditOrderDialog] = React.useState(false)
  const [selectRow, setSelectRow] = React.useState({})
  const [isModalVisible, setIsModalVisible] = React.useState(false)
  const [menuList, setMenuList] = React.useState([])
  const [page, setPage] = React.useState(1)
  const [number, setNumber] = React.useState(0)
  audio = React.useRef(null)
  React.useEffect(() => {
    props.LoadOrderActionAsync({ pageNum: page })
    http.getEnum({ name: 'StatusEnum' }).then((res) => {
      if (res.code !== 200) return
      setStatus(res.data)
    })
    if (timer) { clearInterval(timer) }
    timer = setInterval(() => {
      console.log('有心跳')
      http.getNewOrder().then((res) => {
        if (res.code !== 200) return
        // console.log(audio.current)
        if (audio.current) {
          if (res.data.num > 0) {
            audio.current.play()
          } else {
            // if(audio.current.play){
            audio.current.pause()
            // }
          }
        }
        setNumber(res.data.num)
      })
    }, 3000)
    return () => {
      clearInterval(timer)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  const handleChange = (e) => {
    switch (e) {
      case '已付款':
        setIndex(0)
        break;
      case '已接单':
        setIndex(1)
        break;
      case '已完成':
        setIndex(2)
        break;
      default: ;
    }
  }
  const columns = [
    {
      title: '订单编号',
      dataIndex: 'id',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '交易时间',
      dataIndex: 'time',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '桌号',
      dataIndex: 'tableName',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '用餐人数',
      dataIndex: 'peopleNum',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '详细菜单',
      ellipsis: true,
      align: 'center',
      render: (edit, row) => {
        return (<div>
          <Button type='default' onClick={() => {
            http.menuList({ orderID: row.id }).then((res) => {
              if (res.code !== 200) return
              setMenuList(res.data)
              setIsModalVisible(true)
            })
          }}>详细菜单</Button>
        </div>)
      }
    },
    {
      title: '交易金额(元)',
      dataIndex: 'money',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '订单状态',
      ellipsis: true,
      dataIndex: 'status',
      align: 'center',
      render: (status, row) => {
        if (status === '已付款') { return (<span style={{ color: 'red' }}>{status}</span>) }
        else if (status === '已接单') { return (<span style={{ color: '#f0ee00' }}>{status}</span>) }
        else { return (<span style={{ color: '#3399ff' }}>{status}</span>) }
      }
    },
    {
      dataIndex: 'del',
      title: '操作',
      ellipsis: true,
      align: 'center',
      render: (del, row) => {
        return (
          <div>
            <Button type='primary' style={{ marginRight: '15px' }} onClick={() => {
              setSelectRow(row)
              setShowEditOrderDialog(true)
            }}>处理</Button>
          </div>
        )
      }
    }
  ];
  return (
    <div style={{ padding: '0 100px' }}>
      <audio controls="controls" hidden src="/files/newOrder.mp3" ref={audio}></audio>
      <div style={{ fontSize: '20px', fontWeight: '800' }}>订单管理</div>
      <div style={{ margin: '30px 0 50px 0' }}>
        <span style={{ marginRight: '15px', fontSize: '16px' }}>交易状态</span>
        <Select
          // defaultValue="defaultValue"
          placeholder="请选择"
          style={{
            width: 240,
          }}
          onClear={() => {
            setIndex(-1)
          }}
          allowClear
          size='large'
          onChange={handleChange}
        >
          {status.length === 0 ? '' : status.map((item, index) => {
            return <Option value={item.text} key={item.id}>{item.text}</Option>
          })}
        </Select>
        <Button type='primary' size='middle' style={{ marginLeft: '20px' }}
          onClick={() => {
            if (index !== -1) {
              props.LoadOrderActionAsync({ pageNum: page, status: index })
            } else {
              props.LoadOrderActionAsync()
            }
          }}
        >查询</Button>
      </div>
      <div style={{ position: 'relative' }}>
        <Button style={{ float: 'right', marginBottom: '30px' }} onClick={() => {
          props.LoadOrderActionAsync({ isLoading: true }).then((res) => {
            message.success('刷新成功！')
          })
        }}>刷新订单</Button>
        <span style={{ position: 'absolute', right: '-10px', top: '-12px', borderRadius: '50%', color: '#fff', backgroundColor: '#ff6c37', width: '20px', height: '20px', textAlign: 'center', lineHeight: '20px' }}>{number}</span>
      </div>
      <Table
        dataSource={props.orderList.list}
        columns={columns}
        rowKey="id"
        pagination={
          {
            pageSize: 8,
            total: props.orderList.total,
            onChange: (pageNum, pageSize) => {
              setPage(pageNum)
              props.LoadOrderActionAsync({ pageNum: pageNum, pageSize: pageSize })
            }
          }
        }
      ></Table>
      <UpdateOrder
        visible={showEditOrderDialog}
        page={page}
        row={selectRow}
        close={() => {
          setShowEditOrderDialog(false)
        }}></UpdateOrder>
      <Modal title="详细菜单" visible={isModalVisible}
        onCancel={(e) => { setIsModalVisible(false) }}
        style={{ textAlign: 'center' }}
        footer={null}>
        <div style={{ minHeight: '400px' }}>
          {menuList.map((item, index) => {
            return <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 50px' }} key={item.name}>
              <div>{item.name}</div>
              <div>{item.num}/{item.unitName}{item.normsName}</div>
            </div>
          })}
        </div>
      </Modal>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
  state => ({
    orderList: state.orderList
  }),
  { LoadOrderActionAsync }
)(Order)
